<template>
        <div>


                <div>
                        <!-- searchString 模型与文本域创建绑定 -->
                
                        <input type="text" v-model="searchString" placeholder="输入搜索内容" />
                    </div>
                
                    <ul>
                        <!-- 循环输出数据 -->
                             
                        <li v-for="article in filteredArticles">
                            <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
                            <p>{{article.title}}</p>
                        </li>
                    </ul>

            {{ 1 | myfilter}}
    
            <!-- 这是一个提示框
         v-on:clock.stop 是一个点击事件处理器，stop 修饰符用于阻止事件传递
         v-if 用来判断 show_tooltip 为 true 时才显示 -->

    <div class="tooltip" @click.stop v-if="show_tooltip">

            <!-- v-model 绑定了文本域的内容
             在文本域内容改变时，对应的变量也会实时改变  -->
    
            <input type="text" v-model="text_content" />
        </div>
    
        <!-- 点击后调用 "toggleTooltip" 方法并阻止事件传递 -->
    
        <!--  "text_content" 变量根据文本域内容的变化而变化 -->
    
        <p @click.stop="toggleTooltip">{{text_content}}</p>
    
            <input type="text" v-model="message" />
    
            {{ message }}
    
            <br />
    
            {{ reverse_message }}

            {{ reversedMessage2() }}

            <div :class="{ active: isActive }"></div>


            <button v-on:click = "show = !show">点我</button>
            <transition name = "fade">
                <p v-show = "show" >动画实例</p>
            </transition>
    
            <br /><br />
    
            千米: <input type="text" v-model = "kilometers" />
            米: <input type="text" v-model = "meters" /> 
    
            <br /><br />
    
            <div v-show="flag">
    
                你能看见我
    
            </div>
    
            <br /><br />
    
            <div v-if="num==9">
    
                num == 9
    
            </div>
            <div v-else-if="num==10">
    
                num == 10
    
            </div>
            <div v-else>
    
                num !=9 && num != 10
    
            </div>
    
    
            <br /><br />
    
            <ul>
    
                <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">
    
                    {{ item.text }}
    
                </li>
    
    
            </ul>
    
            <br /><br />
    
            <table>
    
                <tr v-for="(item,index) in datalist">
    
                    <td>
    
                        {{ item.name}}
    
                    </td>
    
                    <td>
    
                        <button @click="minus(index)">-</button>
    
                        <input type="text" v-model="item.num" />
    
                        <button @click="add(index)">+</button>
        
                    </td>
    
                </tr>
    
            </table>
    
            <button @click="add_cart('宝马')">添加宝马</button>
            <button @click="add_cart('电脑')">添加电脑</button>
    
            <br />
            {{ totalCount() }}


            <p style = "font-size:25px;">计数器: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">点我</button>
    
        </div>
    </template>
    
    <script>
    
        export default {
    
            data(){
                return {
                    show_tooltip: false,
        text_content: '点我，并编辑内容。',
                    message:'hello world',
                    show:true,
                    kilometers:0,
                    meters:0,
                    flag:true,
                    num:8,
                    tlist:[{text:'汽车'},{text:'面包'},{text:'牛奶'},{text:'鲜花'}],
                    datalist:[],
                    counter:0,
                    isActive:true,
                    searchString: "",
                    articles: [
            {
                "title": "你好",
                "url": "https://www.runoob.com/css/css-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css.png"
            },
            {
                "title": "Freebie: 4 Great Looking Pricing Tables",
                "url": "https://www.runoob.com/html/html-tutorial.html",
                "image": "https://static.runoob.com/images/icon/html.png"
            },
            {
                "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                "url": "https://www.runoob.com/css3/css3-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css3.png"
            },
            {
                "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                "url": "https://www.runoob.com/css3/css3-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css3.png"
            },
            {
                "title": "Learn SQL In 20 Minutes",
                "url": "https://www.runoob.com/sql/sql-tutorial.html",
                "image": "https://static.runoob.com/images/icon/sql.png"
            },
            {
                "title": "Creating Your First Desktop App With HTML, JS and Electron",
                "url": "https://www.runoob.com/js/js-tutorial.html",
                "image": "https://static.runoob.com/images/icon/html.png"
            }
        ]
                }
            },
            //定义组建标签
            components:{
                //'testheader':testheader
            },
            filters: {
          myfilter: function (value) {

              if(value==1){
                  return '已支付';
              }else{
                  return '未支付';
              }
　　　　　　
　　　　}
　　},
            //自定义方法
            methods:{

                hideTooltip: function(){
            // 在模型改变时，视图也会自动更新
            this.show_tooltip = false;
        },
        toggleTooltip: function(){
            this.show_tooltip = !this.show_tooltip;
        },

                reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  },

                //汇总商品数量
                totalCount:function(){
    
                    //默认数量
                    let total = 0;
                    //遍历
                    for(let i=0,l=this.datalist.length;i<l;i++){
    
                            total += this.datalist[i].num;
                    }
    
                    return total;
    
    
                },
                //减少商品数量
                minus:function(index){
                    if(this.datalist[index].num > 0){
                    this.datalist[index].num--;
                }
                },
                //增加商品数量
                add:function(index){
                  
                    this.datalist[index].num++;
                
                },
                //添加购物车
                add_cart:function(name){
                    //声明购物车变量
                    let cartlist = this.datalist;
                    //声明坐标
                    let findgood = 0;
                    //遍历购物车列表
                    for(let i=0,l=cartlist.length;i<l;i++){
    
                        //判断逻辑
                        if(name == cartlist[i]['name']){
    
                                cartlist[i]['num']++;
                                findgood = 1;
                                break;
                        }
                    }
                    if(findgood==0){
                        cartlist.push({name:name,num:1});
                    }
                    //重新赋值
                    this.datalist = cartlist;
                }
    
            },
            //钩子方法
            mounted:function(){
    
                console.log('这是初始化方法');
    
            },
            //监听属性
            watch:{

                counter:function(nval, oval) {
    console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

                },
    
                kilometers:function(val){
    
                    this.kilometers = val;
                    this.meters = val * 1000;
    
                },
                meters:function(val){
    
                    this.kilometers = val / 1000;
                    this.meters = val
    
    
                }
    
    
            },
            //计算属性
            computed:{
    
                reverse_message:function(){
    
                    //反转逻辑
                    return '$'+this.message.split('').reverse().join('')
    
                },
                filteredArticles: function () {
            var articles_array = this.articles,
                searchString = this.searchString;

            if(!searchString){
                return articles_array;
            }

            searchString = searchString.trim();

            articles_array = articles_array.filter(function(item){
                if(item.title.indexOf(searchString) !== -1){
                    return item;
                }
            });
            // 返回过来后的数组
            return articles_array;;
        }
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
    
        .on { background:rebeccapurple}
        .off {background: red}


        .active {
	width: 100px;
	height: 100px;
	background: black;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 5s
}
.fade-enter, .fade-leave-to  {
    opacity: 0
}
    
    </style>